<template>
	<view class="content">
		<view class="selleInfo">
			<image class="seller-cover" :src="terminalInfo.sellerCert" mode="aspectFit"></image>
			<view class="seller-detail">
				<view class="seller-name">{{terminalInfo.terminalName}}</view>
				<view class="seller-info-list">
					<view class="seller-info-item">
						<image src="http://file.quantifynet.com/image/cashier/icon_home_merchant_shipping.png"></image>
						<view >商家配送</view>
					</view>
					<view class="seller-info-item" style="margin-left: 24rpx;">
						<image src="http://file.quantifynet.com/image/cashier/icon_home_store_come_undone.png"></image>
						<view >到店自提</view>
					</view>
					<view class="seller-info-item" style="margin-left: 24rpx;">
						<image src="http://file.quantifynet.com/image/cashier/icon_home_call.png"></image>
						<view >联系商家</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="goods-list-title">商品列表</view>
		
		<view class="goods-list-total">共{{goodsList.length}}件商品</view>
		<view class="shop-goods" v-for="(item,index) in goodsList" :key="index">
			<image :src="item.thumbUrl" mode="aspectFill"></image>
			<view class="goods-view">
				<view class="goods-name">{{item.name}}</view>
				<view class="goods-price"><span style="font-size: 24rpx;">￥</span>{{item.salePrice}}</view>
			</view>
			<view class="goods-total">X{{item.totalNum}}</view>
		</view>
		
		
		<view class="topay">
			<view class="pay-total">￥{{payAmount}}</view>
			<view class="pay-btn" @click="toPay()" >去支付</view>
		</view>
	</view>
</template>

<script>
	
	import { token, userInfo } from '@/utils/token.js'

	import {
		departId
	} from '../../config'
	
	const app = getApp();
	export default {
		data() {
			return {
				terminalNo:'',
				orderNo:'',
				terminalInfo:{},
				totalAmount:0,
				payAmount:0,
				goodsList:[],
				payStatus:0,
				payInfo:{},
			}
		},
		onLoad(option) {
			this.terminalNo = option.terminalNo;
			//如果是扫码进的
			let devNo = decodeURIComponent(option.q)
			if (devNo) {
				if (devNo.indexOf("terminalNo=") > -1) {
					this.terminalNo = devNo.slice(devNo.indexOf("terminalNo=") + 11)
				}
			}
			this.orderNo = option.orderNo;
			//如果是扫码进的
			let orderNoUrl = decodeURIComponent(option.q)
			if (orderNoUrl) {
				if (orderNoUrl.indexOf("orderNo=") > -1) {
					let i = orderNoUrl.indexOf("orderNo=") + 8;
					this.orderNo = orderNoUrl.slice(i,i+26)
				}
			}
			console.log(this.terminalNo);
			//静默登录
			let that = this;
			uni.login({
				success(loginRes) {
					console.log(loginRes)
					that.code = loginRes.code
					that.$api.miniCodeLogin({params:{departId:departId,code:loginRes.code}}).then(res =>{
						that.openId = res.data.openId;
						uni.setStorageSync('lianghopenid',that.openId);
						if(res.avatarUrl){
							that.headUrl = res.avatarUrl;
						}
						that.getOrderInfo();
						that.getPayInfo();
					});
				},
				fail(res){
					console.log('fail');
					console.log(res)
				}
			})
			this.findByTerminalNo();
		},
		methods: {
			findByTerminalNo(){
				this.$api.findByTerminalNo({params:{terminalNo:this.terminalNo}}).then(res =>{
					console.log(res)
					this.terminalInfo = res.data;
				});
			},
			getOrderInfo(){
				this.$api.getOrderInfo({params:{orderNo:this.orderNo,openId:this.openId}}).then(res =>{
					this.totalAmount = res.data.goodsAmount;
					this.payAmount = res.data.payAmount;
					this.goodsList = res.data.orderDetail;
					this.payStatus = res.data.orderStatus;
				})
			},
			getPayInfo(){
				this.$api.getPayInfo({params:{orderNo:this.orderNo,openId:this.openId,type:app.globalData.browserPlatform}}).then(res =>{
					this.payInfo = res.data;
					console.log(	this.payInfo)
				})
			},
			toPay(){
				this.$api.getTerminalStatusByOrderNo({params:{orderNo:this.orderNo}}).then(res =>{
					if(res.data == true){
						this.h5ChooseWXPay();
					}else{
						uni.showModal({
							title: '提示',
							content: '设备正在运行,请等待前一个人完成后支付',
							showCancel:false,
							success: function (res) {
								
							}
						});
					}
				})
			},
			h5ChooseWXPay(){
				
				let that = this;
				console.log(that.payInfo)
				wx.requestPayment({
				  
				  timeStamp: that.payInfo.timeStamp,
				  nonceStr: that.payInfo.nonceStr,
				  package: that.payInfo.packageValue,
				  signType: that.payInfo.signType,
				  paySign: that.payInfo.paySign,
				  success: success => {
				  	that.payStatus = 3;
				  	uni.reLaunch({
				  		url:'/pages/cashier/payok?sellerName='+this.terminalInfo.terminalName+'&price='+this.payAmount
				  	})
				  },
				  fail: error => {
					  console.log(error)
				  	uni.showToast({
				  		title: '参数错误，支付失败',
				  		icon: 'none'
				  	});
				  },
				  cancel: cancel => {
				  	
				  }
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f7f7f7;
	}
.content{
	background-color: #f7f7f7;
	font-family: PingFang-SC, PingFang-SC;
	.topay{
		position: fixed;
		left: 30rpx;
		bottom: 30rpx;
		height: 140rpx;
		background: #413C4C;
		box-shadow: 0px -5px 20px 0px rgba(0,0,0,0.05);
		border-radius: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 690rpx;
		.pay-total{
			margin-left: 30rpx;
			color:#E95C50;
			font-size: 34rpx;
			font-weight: 600;
			font-family: PingFangSC, PingFang SC;
		}
		.pay-btn{
			
			background: #E95C50;
		
			text-align: center;
			line-height: 70rpx;
			margin-right: 32rpx;
			font-size: 26rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			color: #FFFFFF;
			
			width: 184rpx;
			height: 68rpx;
			background: #DC564A;
			border-radius: 34rpx;
		}
	}
	.selleInfo{
		font-family: PingFang-SC, PingFang-SC;
		background-color: #fff;
		height: 155rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		.seller-detail{
			display: flex;
			flex-direction: column;
			margin-left: 37rpx;
		}
		.seller-name{
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			font-style: normal;
		}
		.seller-info-list{
			margin-top: 30rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
		.seller-info-item{
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			font-style: normal;
			image{
				width: 34rpx;
				height: 34rpx;
			}
		}
		.seller-cover{
			position: absolute;
			width: 106rpx;
			height: 106rpx;
			right: 46rpx;
			top: 25rpx;
		}
	}
	.goods-list-title{
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 30rpx;
		color: #0D0D0D;
		font-style: normal;
		margin-top: 30rpx;
		margin-left: 30rpx;
	}
	.goods-list-total{
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
		margin-top: 8rpx;
		margin-left: 30rpx;
		font-style: normal;
	}
	.shop-goods{
		margin-top: 24rpx;
		background-color: #fff;
		width: 690rpx;
		height: 226rpx;
		margin-left: 30rpx;
		display: flex;
		flex-direction: row;
		position: relative;
		.goods-view{
			margin-top: 24rpx;
			margin-left: 30rpx;
			margin-bottom: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.goods-name{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #0D0D0D;
				width: 430rpx;
			}
			.goods-price{
				font-family: DINAlternate, DINAlternate;
				font-weight: bold;
				font-size: 36rpx;
				color: #E04234;
			}
		}
		image{
			width: 166rpx;
			height: 166rpx;
			margin-left: 30rpx;
			margin-top: 30rpx;
		}
	
		.goods-total{
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
			position: absolute;
			bottom: 24rpx;
			right: 50rpx;
			display: block;
		}
	}
	
}
.line{
	width: 100%;
	height: 2rpx;
	background-color: #eeeeee;
}
.line-block{
	width: 100%;
	height: 2rpx;
	background-color: #eeeeee;
	position: absolute;
	left: 0rpx;
	top: 0rpx;
}

</style>
